<template>
    <div id="customer">
        <el-button @click="insertList" class="slot-btn-top" type="primary" size="small">添加</el-button>
        <el-table :data="dataList.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe border :height="tableHeight" :header-cell-style="getRowClass">
            <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
            <el-table-column prop="code" label="客户编号" sortable min-width="100"></el-table-column>
            <el-table-column prop="name" label="客户名称" sortable min-width="240"></el-table-column>
            <el-table-column prop="type" label="类型" :formatter="formatType" sortable min-width="80"></el-table-column>
            <el-table-column prop="linkperson" label="联系人" sortable min-width="85"></el-table-column>
            <el-table-column prop="phone" label="电话" sortable min-width="120"></el-table-column>
            <el-table-column prop="address" label="地址" sortable min-width="300"></el-table-column>
            <el-table-column prop="qualitysum" label="质保金" sortable min-width="90"></el-table-column>
            <el-table-column prop="invoicestartnums" label="发票起初数" sortable min-width="110"></el-table-column>
            <el-table-column prop="invoicesum" label="发票金额" sortable min-width="100"></el-table-column>
            <el-table-column prop="startnums" label="起初数" sortable min-width="90"></el-table-column>
            <el-table-column prop="paysum" label="应付款" sortable min-width="90"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="right" width="100">
                <template slot-scope="scope">
                    <el-button @click="updateList(scope.row)" type="text" size="mini">编辑</el-button>
                    <el-button @click="deleteList(scope.row)" type="text" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="dataList.length"></el-pagination>

        <!-- 基础信息编辑 -->
        <el-dialog :title="dialogTitle" width="750px" center :visible.sync="isDialog" :close-on-click-modal="false">
            <el-form :inline="true" class="demo-form-inline" v-model="dialogList" label-position="right" label-width="120px">
                <el-form-item label="客户编号"><el-input v-model="dialogList.code"></el-input></el-form-item>
                <el-form-item label="客户名称"><el-input v-model="dialogList.name" ></el-input></el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="dialogList.type" >
                        <el-option label="客户" value="1"></el-option>
                        <el-option label="供应商" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系人"><el-input v-model="dialogList.linkperson" ></el-input></el-form-item>
                <el-form-item label="地址"><el-input v-model="dialogList.address" ></el-input></el-form-item>
                <el-form-item label="传真"><el-input v-model="dialogList.fax" ></el-input></el-form-item>
                <el-form-item label="电话"><el-input v-model="dialogList.phone" ></el-input></el-form-item>
                <el-form-item label="邮箱"><el-input v-model="dialogList.email" ></el-input></el-form-item>
                <el-form-item label="开户行"><el-input v-model="dialogList.bank" ></el-input></el-form-item>
                <el-form-item label="账户"><el-input v-model="dialogList.account" ></el-input></el-form-item>
                <el-form-item label="税号"><el-input v-model="dialogList.taxnums" ></el-input></el-form-item>
                <el-form-item label="质保金"><el-input v-model="dialogList.qualitysum" ></el-input></el-form-item>
                <el-form-item label="发票起初数"><el-input v-model="dialogList.invoicestartnums" ></el-input></el-form-item>
                <el-form-item label="发票金额"><el-input v-model="dialogList.invoicesum" ></el-input></el-form-item>
                <el-form-item label="起初数"><el-input v-model="dialogList.startnums" ></el-input></el-form-item>
                <el-form-item label="应付款"><el-input v-model="dialogList.paysum" ></el-input></el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="submitList" type="primary">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "customer",
        data() {
            let token = sessionStorage.getItem("tokenId");
            return {
                tokenId: token,
                currentPage: 1,
                pagesize: 10,
                tableHeight: document.documentElement.clientHeight - 170,
                dataList: [],

                isDialog: false,
                dialogTitle: '',
                dialogList:{
                    account: '',
                    address: '',
                    bank: '',
                    code: '',
                    email: '',
                    fax: '',
                    id: '',
                    invoicestartnums: '',
                    invoicesum: '',
                    linkperson: '',
                    name: '',
                    paysum: '',
                    period: '',
                    phone: '',
                    qualitysum: '',
                    startnums: '',
                    taxnums: '',
                    type: '',
                },
            }
        },
        created() {
            this.getData();
        },
        methods: {
            getData() {
                let _this = this;
                let loading = this.$loading({
                    target: document.querySelector(".wrapper > .content-box"),
                    lock: true,
                    text: '正在努力加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.8)'
                });
                this.$http({
                    url: '/api/adscm/operation/jyCustomerProvider/selectAll?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.dataList = res.data.content;
                        loading.close();
                    } else {
                        _this.$message.error(res.data.desc);
                        loading.close();
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                    loading.close();
                })
            },
            insertList() {
                this.isDialog= true;
                this.dialogTitle= '添加信息';
                this.dialogList= {
                    account: '',
                    address: '',
                    bank: '',
                    code: '',
                    email: '',
                    fax: '',
                    id: '',
                    invoicestartnums: '',
                    invoicesum: '',
                    linkperson: '',
                    name: '',
                    paysum: '',
                    period: '',
                    phone: '',
                    qualitysum: '',
                    startnums: '',
                    taxnums: '',
                    type: '',
                };
            },
            updateList(row) {
                this.isDialog= true;
                this.dialogTitle= '编辑信息';
                this.dialogList= row;
            },
            deleteList(row){
                let _this = this;
                this.$confirm('确认删除吗?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    _this.$http({
                        url: '/api/adscm/operation/jyCustomerProvider/delete/'+row.id+'?tokenId=' + _this.tokenId,
                        method: 'post',
                        headers: {'X-Requested-With': 'XMLHttpRequest'},
                    }).then(function (res) {
                        if (res.data.statusCode == 200) {
                            _this.getData();
                        } else {
                            _this.$message.error(res.data.desc);
                        }
                    }).catch(function (catchres) {_this.$message.error("加载失败！请重新加载...");})
                }).catch(() => {});
            },
            submitList(){
                let _this = this;
                let url;
                if (this.dialogTitle=== '添加信息') {
                    url='/api/adscm/operation/jyCustomerProvider/insert?tokenId=' + _this.tokenId;
                } else if (this.dialogTitle=== '编辑信息') {
                    url='/api/adscm/operation/jyCustomerProvider/update?tokenId=' + _this.tokenId;
                }
                this.$http({
                    url: url,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    data:_this.dialogList
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.isDialog= false;
                        if (this.dialogTitle=== '添加信息') _this.getData()
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },
            formatType(c,r,value,index){
                return value ? (value==1 ? '客户' : (value==2 ? '供应商' :  '')) : '';
            },
            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
            },
        }
    }
</script>

<style scoped>

    #customer .el-table--small {
        font-size: 13px;
    }

    #customer .el-table .cell,
    #customer .el-table th div {
        padding-left: 0;
        padding-right: 0;
    }


</style>
